<template>
  <div class="home-banner">
    <Slider :data="list" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue-demi'
import { findBanner } from '../../../api/home'

const useSlider = () => {
  /**
   * 1. 定义轮播图数据变量
   * 2. 定义获取轮播图数据的方法
   * 3. 在组件挂载之后发请求
   */
  const list = ref([])
  const getList = async () => {
    // 点击事件回调函数中不能获取useStore返回值
    const res = await findBanner()
    console.log(res)
    list.value = res.result
  }
  onMounted(() => {
    getList()
  })

  return { list }
}

export default {
  name: 'HomeBanner',
  setup () {
    // 注意加大括号
    const list = useSlider().list
    return { list }
  }

}

</script>

<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
</style>
